<script setup>
import { computed, ref } from "vue";
const props = defineProps({
  num: Number,
  boxClass: String,
  active: Number,
  isStart: Number,
  isEnd: Number,
});
const status = ref(0); //0:无,1:起点,2:终点,3:奖励,4:障碍,
const setObj = () => {
  if (status.value === props.active) {
    if (props.active === 1) setStartNum(0);
    if (props.active === 2) setEndNum(0);
    status.value = 0;
    return;
  }
  if (props.active === 1) {
    if (props.isStart === 1) return ElMessage.error("只能设置一个起点！");
    setStartNum(1);
  }
  if (props.active === 2) {
    if (props.isEnd === 1) return ElMessage.error("只能设置一个终点！");
    setEndNum(1);
  }
  status.value = props.active;
};
const emit = defineEmits(["setStartNum", "setEndNum"]);
const setStartNum = (num) => {
  emit("setStartNum", num);
};
const setEndNum = (num) => {
  emit("setEndNum", num);
};
const StatusColor = computed(() => {
  let boxColor = "";
  switch (status.value) {
    case 0:
      boxColor = "#fff";
      break;
    case 1:
      boxColor = "#409eff";
      break;
    case 2:
      boxColor = "#f00";
      break;
    case 3:
      boxColor = "#67c23a";
      break;
    case 4:
      boxColor = "#333";
      break;
  }
  return boxColor;
});
defineExpose({ 
  status, 
  StatusColor
});
</script>

<template>
  <div
    :style="{ backgroundColor: StatusColor }"
    :class="['box', props.boxClass]"
    @click="setObj()"></div>
</template>

<style lang="less" scoped>
.box {
  border: 1px solid #000;
  box-sizing: border-box;
}
.w20 {
  width: 30px !important;
  height: 30px !important;
}
.w10 {
  width: 50px !important;
  height: 50px !important;
}
.w30 {
  width: 20px !important;
  height: 20px !important;
}
</style>
